<template>
  <div>
    <div class="h_25"></div>
    <van-tabbar v-model="active" active-color="#ee0a24">
      <van-tabbar-item icon="wap-home-o" @click="toHome">首页</van-tabbar-item>
      <van-tabbar-item icon="orders-o" @click="to('/category')">分类</van-tabbar-item>
      <van-tabbar-item icon="cash-back-record" @click="to('/worthbuy')">值得买</van-tabbar-item>
      <van-tabbar-item icon="shopping-cart-o" @click="to('/cart')">购物车</van-tabbar-item>
      <van-tabbar-item icon="user-circle-o" @click="to('/personal')">个人</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { showToast } from 'vant'

import router from '@/router';
import { useRoute } from 'vue-router';

const route = useRoute()

const active = ref(0);

onMounted(()=>{
  active.value = route.meta.index as number
})
      

// 事件回调
const to = (url: string) => {
  router.push(url)
}
// 点击首页的回调
const toHome = () => {
  to('/home')
  localStorage.setItem('currentIndex', '0')
}
</script>

<style scoped>
.h_25 {
  height: 25px;
}
</style>
